<template>
  <view class="courses">
    <!-- 搜索 -->
    <view class="cu-bar search bg-white shadow">
      <view class="search-form round">
        <text class="cuIcon-search"></text>
        <input
          placeholder="请输入关键字查找课程"
          class="uni-input"
          type="text"
          :value="data"
          @input="dataChange"
        />
      </view>
      <view class="action">
        <!-- <text style="font-size: 150%;" class="cuIcon-scan"></text> -->
        <view class="cu-btn bg-blue round" @click="searchCourse">搜索</view>
      </view>
    </view>
    <!-- 搜索 -->
    <!-- 普通页面 -->
    <view v-if="isShow">
      <view class="cu-card case">
        <view class="cu-item shadow bg-white">
          <view class="title_wrap">
            <view class="title_in">
              <uni-segmented-control
                :current="current"
                :values="items.map(v=>v.title)"
                @clickItem="handleClick"
                style-type="text"
                active-color="#feb2b2"
              ></uni-segmented-control>
            </view>
          </view>
        </view>
      </view>
      <!-- 课程页面开始 -->
      <view class="courses_concent">
        <view v-if="current === 0">
          <recommend-course></recommend-course>
        </view>
        <view v-if="current === 1">
          <new-course></new-course>
        </view>
        <view v-if="current === 2">
          <mine-course></mine-course>
        </view>
        <view v-if="current === 3">
          <category-course></category-course>
        </view>
      </view>
    </view>

    <!-- 普通页面 -->

    <!-- 搜索页面 -->
    <view v-else>
      <view class="cu-card flex justify-center align-center">
        <view class="cu-item shadow bg-white" @click="clickCancel">
          <text class="cuIcon-roundclose text-red" style="font-size: 25px; margin: 0 10px;"></text>
        </view>
      </view>
      <block v-for="(item,index) in searchList" :key="index">
        <courseList :item="item" :index="index"></courseList>
      </block>
    </view>
    <!-- 搜索页面 -->
  </view>
</template>
<!-- 课程页面结束 -->
<script>
import courseList from "../../component/courseList.vue";
import newCourse from "./new-course";
import recommendCourse from "./recommend-course";
import mineCourse from "./mine-course";
import categoryCourse from "./category-course";
import { uniSegmentedControl } from "@dcloudio/uni-ui";
import { uniIcons } from "@dcloudio/uni-ui";
export default {
  components: {
    courseList,
    recommendCourse,
    mineCourse,
    newCourse,
    uniSegmentedControl,
    uniIcons,
    categoryCourse
  },
  data() {
    return {
      current: 1,
      items: [
        { title: "推荐" },
        { title: "最新" },
        { title: "我的" },
        { title: "分类" }
      ],
      data: null, //班级搜索输入值
      isShow: true, //true为正常页面,false为搜索结果页面
      searchList: [] //搜索结果list
    };
  },
  methods: {
    handletest() {
      console.log(current);
    },
    handleClick(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex;
      }
    },
    dataChange: function(e) {
      //搜索框数据改变
      this.data = e.detail.value;
    },
    clickCancel() {
      this.isShow = true;
    },
    searchCourse() {
      var data = this.data;
      console.log(data);
      if (data != null) {
        this.request({
          url: this.apiServer + "/courses/findCoursesByName?name=" + data
        }).then(res => {
          console.log(res);
          if (res.code === "0") {
            uni.showToast({
              title: "查找成功"
            });
            this.searchList = res.data;
            this.isShow = false;
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000
            });
          }
          this.data = null;
        });
      } else {
        uni.showToast({
          title: "请重新输入",
          image: "../../static/icon/error.png"
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.search_btn {
  padding: 10rpx;
}

.title_wrap {
  .left_btn {
  }
  .right_btn {
  }
  .title_in {
    margin: 0 auto;
    width: 60%;
  }
}
.courses-concent {
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
}
</style>